<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title></title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
  <link rel="stylesheet" href="/static/mobile/css.css">
  <link rel="stylesheet" href="/static/mobile/iconfont.css">
  <style>
    .weui-tabbar__item.weui-bar__item--on .weui-tabbar__label,
    .weui-tabbar__item .weui-tabbar__label,
    .weui-tabbar__item i {
      color: #0000ff;
    }

    .flag {
      position: absolute;
      top: -.4em;
      border-radius: 30%;
    }

    .icon-right, icon-cuo1 {
      margin: 0 15px;
    }

    .tools {
      text-align: center;
      background-color: #f2f2f2;
      padding: 10px 0;
    }

    .tools > .trash {
      float: left;
    }

    .tools > div {
      display: inline-block;
    }


    .timedown {
      float: right;
      padding-right: 10px;
    }
    .btn-primary {
      background-color: #e3e7ea;
      color: #a9a9a9;
    }

    .btn-answered {
      background-color: #dcf2fd;
      color: #2eade0;
    }

  </style>
</head>
<body>
<section id="content">
  <div class="cover" v-show="toggleQuestions" @click="hideQuestions"></div>
  <div class="header">
    <div class="weui-flex">
      <div class="weui-flex__item">
        <div class="placeholder" style="width: 25%;">
          <a href="javascript:window.history.back();" class="fanhui">
            <i class="iconfont icon---" style="float: left; margin-left: 10px;"></i>
          </a>
        </div>
      </div>
      <div class="weui-flex__item"><span class="page-header">模拟考试</span></div>
      <div class="weui-flex__item"><span class="timedown">倒计时{{minute}}:{{second}}</span></div>
    </div>
  </div>
  <v-touch class="panel-body" tag="div" v-on:swipeleft="onSwipeLeft()"
           v-on:swiperight="onSwipeRight()">
    <div class="text-question">
      <div class="qType">{{type==0 ? '判断题' : '单选题'}}</div>
      {{content}}
    </div>
    <div class="text-answers" v-for="(item,index) in answers" v-on:click="answerClick(index)"
         v-bind:class="{'text-primary':active==index && !toggleQuestions}">
      <div>{{item}}<i class="iconfont green" v-bind:class="{'icon-right':active==index}"></i></div>
    </div>
  </v-touch>
  <div id="footer">
    <div class="tools">
      <div style="float: left;margin-left: 10px;">
        <button type="button" class="weui-btn weui-btn_mini weui-btn_primary" @click="examSubmit">交卷</button>
      </div>
      <div><i class="iconfont icon-hongqi red" @click="signQuestion"></i></div>
      <div style="float: right;margin-right: 10px;">
        <a @click="hideQuestions"><i class="iconfont icon-liebiao"></i>&nbsp;{{cursor+1}} / {{questionTotal}}</a>
      </div>
    </div>
    <div class="btn-questions" v-show="toggleQuestions">
      <div style="text-align: center">
        <div class="btn-question" v-for="(item,index) in cursors"
             v-bind:class="{'btn-answered':paperAnswers[index]!=undefined,
           'active':(cursor==index)
           }"
             v-on:click="getQuestion(index)">{{item}}<span class="flag red" v-show="paperSign[index]==1">
        <i class="iconfont icon-hongqi"></i></span>
        </div>
      </div>

    </div>
  </div>
</section>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
<script src="/static/mobile/vue-touch.min.js"></script>
<script src="/static/mobile/main.js"></script>

<script>
  Vue.use(VueTouch, {name: 'v-touch'});

  var content = new Vue({
    el: "#content",
    data: {
      minute: 0, //考试持续时间中的分钟
      second: 0, //考试时间中的秒
      nowTimestamp: 0, //当前时间戳
      cursorMax: 0, //最大游标
      content: '',  //问题
      answers: [],  //答案
      cursor: 0, //当前游标
      cursors: [], //所有游标，用于分页
      active: -1,
      lastActive: -1,
      paperAnswers: [],
      paperQuestions: [],
      paperSign: [],
      paperId: 0,
      paperQuestionIDs: [],
      examFinish: 0,
      passScore: 0,
      testAnswerId: 0,
      questionTotal: 0,
      toggleQuestions: false,
      type: 0
    },
    created: function () {
      var that = this;
      js_request('/portal/test/view', {}, function (result) {
        var id, cursor;
        if (result.code == -1) {
          $.alert(result.msg, "forbidden");
          window.location.href='test_pre.html';
          return false;
        }
        if (result.code == 0) {
          $.alert(result.msg, "forbidden");
          return false;
        }
        that.minute = result.data.minute;
        that.second = result.data.second;
        that.minute = that.minute >= 10 ? that.minute : '0' + that.minute;
        that.second = that.second >= 10 ? that.second : '0' + that.second;
        that.nowTimestamp = result.data.nowTimestamp;
        that.paperId = result.data.paperId;
        that.examFinish = result.data.examFinish;
        that.passScore = result.data.passScore;
        that.testAnswerId = result.data.testAnswerId;
        //
        that.cursors = JSON.parse(result.data.cursors);
        that.cursorMax = result.data.cursorMax;
        that.cursor = result.data.cursor;
      });
    },
    mounted: function () {
      var that = this;
    },
    watch: {
      paperId: function () {
        var that = this;
        this.timeCountdown();
        js_request("/portal/test/getPaperQuestions", {"paper_id": that.paperId}, function (result) {
          if (result.code == 1) {
            var id = -1, cursor = that.cursor;
            if (!result.data) {
              js_alert('没有内容');
              return false;
            }
            that.paperQuestionIDs = result.data.paperQuestionIDs;
            id = that.paperQuestionIDs[cursor];
            that.paperQuestions = result.data.paperQuestions;
            that.content = that.paperQuestions[id].content;
            that.answers = JSON.parse(that.paperQuestions[id].answers);
            that.active = result.data.active;
            that.paperAnswers = result.data.paperAnswers;
            that.paperSign = result.data.paperSign;
            //
            that.questionTotal = that.paperQuestionIDs.length;
            that.content = that.paperQuestions[id].content;
            that.type = that.paperQuestions[id].type;
            that.answers = JSON.parse(that.paperQuestions[id].answers);
          } else {
            js_alert(result.msg);
          }
        });
      }
    },
    methods: {
      onSwipeLeft: function () {
        this.nextQuestion();
      },
      onSwipeRight: function () {
        this.lastQuestion();
      },
      hideQuestions: function () {
        this.toggleQuestions = !this.toggleQuestions;
      },
      timeCountdown: function () {
        var that = this, minute = this.minute, second = this.second,
          nowTimestamp = this.nowTimestamp;
        var newTime;
        var t = setInterval(function () {
          nowTimestamp += 1;
          newTime = new Date(nowTimestamp * 1000);
          that.nowTime = newTime.toTimeString().substr(0, 8);
          if (minute == 0 && second == 0) {
            clearInterval(t);
            if (this.examFinish == 0) {
              js_alert('考试时间结束，点击确定自动交卷', function () {
                that.examSubmit();
              })
            } else {
              js_alert('考试已经结束');
              window.location.href='test_pre.html';
            }
            return false;
          }
          if (second > 0) {
            second--;
          } else {
            if (minute >= 0) {
              minute--;
              second = 59;
            }
          }
          that.minute = minute >= 10 ? minute : '0' + minute;
          that.second = second >= 10 ? second : '0' + second;
        }, 1000);
      },
      signQuestion: function () {
        var that = this;
        var cursor = this.cursor;
        var sign = this.paperSign[cursor];
        js_request("/portal/test/signQuestion", {
          "id": that.testAnswerId,
          "cursor": cursor,
        }, function (result) {
          if (result.code == 1) {
            that.paperSign[cursor] = !sign;
            js_message(sign ? '取消标记' : '标记成功');
            return false;
          }
          js_alert(result.msg);
        });
      },
      answerClick: function ($index) {
        var that = this;
        var active = $index;
        var cursor = this.cursor;
        if (this.active == $index || this.toggleQuestions)
          return false;
        that.paperAnswers[cursor] = active;
        that.active = $index;
        //
        js_request("/portal/test/doAnswer", {
          "id": that.testAnswerId,
          "cursor": cursor,
          'answer': active
        }, function (result) {
          if (result && result.code == 1) {
            that.paperAnswers[cursor] = active;
            that.active = $index;
            $.toast('答题成功', 500, function () {
              that.nextQuestion();
            });
          } else {
            js_alert(result.msg);
          }
        })
      },
      examSubmit: function (e) {
        var keys = Object.keys(this.paperAnswers);
        var that = this;
        var msg = "确定要提交考卷吗？";
        if (this.examFinish) {
          js_alert('考卷已经提交，不能再次提交');
          return false;
        }
        if (keys.length < this.cursorMax) {
          msg = '考卷还没有完成，确定要交卷吗';
        }
        $.confirm(msg, function () {
          js_request("/portal/test/finish", {"id": that.testAnswerId}, function (result) {
            if (result.code == 1) {
              that.examFinish = 1;
              js_alert(result.msg, function () {
                window.location.href = "my.html";
              });
              return false;
            }
            js_alert(result.msg);
          });
        });
      },
      getQuestion: function (cursor) {
        var that = this;
        var nowCusor = this.cursor;
        var active = this.active;
        var id = that.paperQuestionIDs[cursor];
        if (cursor == this.cursor) return false;

        that.content = that.paperQuestions[id].content;
        that.answers = JSON.parse(that.paperQuestions[id].answers);
        that.active = that.paperAnswers[cursor];
        that.cursor = cursor;
        that.type = that.paperQuestions[id].type;
      },
      nextQuestion: function (e) {
        var that = this;
        if (this.cursor > this.cursorMax) {
          $.toast("已经是最后一条数据了", "forbidden");
          return false;
        }

        $(".panel-body").fadeOut('fast', function () {
          that.getQuestion(that.cursor + 1);
          $(".panel-body").fadeIn('slow')
        });

      },
      lastQuestion: function (e) {
        var that = this;
        if (this.cursor <= 0) {
          $.toast("已经是第一条数据了", "forbidden");
          return false;
        }
        $(".panel-body").fadeOut('fast', function () {
          that.getQuestion(that.cursor - 1);
          $(".panel-body").fadeIn('slow')
        });
      }

    },
  });
</script>
</body>
</html>